<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="mvvm-app">
	    <input type="text" v-model="word">
	    <p>{{word}}</p>
	    <button v-on:click="sayHi">change model</button>
	</div>
	<!-- 实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者 -->
	<script src="./observer.js"></script>
	<!-- 实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图 -->
	<script src="./watcher.js"></script>
	<!-- 实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数 -->
	<script src="./compile.js"></script>
	<!-- mvvm入口函数，整合以上三者 -->
	<script src="./mvvm.js"></script>
	<script>
	    var vm = new MVVM({
	        el: '#mvvm-app',
	        data: {
	            word: 'Hello World!'
	        },
	        methods: {
	            sayHi: function() {
	                this.word = 'Hi, everybody!';
	            }
	        }
	    });
	</script>
</body>
</html>